import React from "react";
import { Layout, Typography, Card, List, Space, Tag } from "antd";
import styles from "./index.module.less";

const { Title, Text } = Typography;

interface TaskCard {
  id: string;
  title: string;
  description: string;
  assignee: string;
  type: string;
  totalDays?: string;
}

interface ResourceItem {
  name: string;
  taskCount: number;
}

const TaskBoard: React.FC = () => {
  const taskColumns = [
    {
      title: "待办",
      tasks: [
        {
          id: "#7251",
          title: "特性",
          description: "功能立项与看板及流程中心打通",
          assignee: "杨东卫",
          type: "特性",
          totalDays: "--",
        },
        {
          id: "#7346",
          title: "check",
          description: "",
          assignee: "杨东卫",
          type: "check",
        },
      ],
    },
    {
      title: "分析设计",
      tasks: [
        {
          id: "#7329",
          title: "预研&估点",
          description: "remove username",
          assignee: "杨东卫",
          type: "预研&估点",
        },
      ],
    },
    {
      title: "测试案例",
      tasks: [
        {
          id: "#7107",
          title: "待开发",
          description: "[2025-04] 上线工作",
          assignee: "胡剑波",
          type: "待开发",
        },
      ],
    },
    {
      title: "开发自测",
      tasks: [
        {
          id: "#7252",
          title: "开发完成",
          description: "看板支持3.0立项",
          assignee: "黄莉",
          type: "开发完成",
        },
      ],
    },
  ];

  const resources: ResourceItem[] = [
    { name: "王宇壮", taskCount: 2 },
    { name: "胡剑波", taskCount: 0 },
    { name: "陈建平", taskCount: 2 },
  ];

  return (
    <Layout className={styles.container} data-oid="d:imm6y">
      <div className={styles.content} data-oid="341el3w">
        <div className={styles.taskBoards} data-oid="drunkcm">
          {taskColumns.map((column) => (
            <Card
              key={column.title}
              title={column.title}
              className={styles.taskColumn}
              bordered={false}
              data-oid="wdsxof:"
            >
              <List
                dataSource={column.tasks}
                renderItem={(task) => (
                  <List.Item data-oid="4.k.w:4">
                    <Card
                      className={styles.taskCard}
                      bordered={false}
                      data-oid="hlptwb8"
                    >
                      <Space
                        direction="vertical"
                        size="small"
                        style={{ width: "100%" }}
                        data-oid="zr3uocs"
                      >
                        <div className={styles.taskHeader} data-oid="dxmdef3">
                          <Text strong data-oid="l42q_b-">
                            {task.id}
                          </Text>
                          <Tag color="blue" data-oid="s48ur_8">
                            {task.type}
                          </Tag>
                        </div>
                        <Text data-oid="ut9gqy9">{task.description}</Text>
                        {task.totalDays && (
                          <Text type="secondary" data-oid="u9xo5yt">
                            总人天 {task.totalDays}
                          </Text>
                        )}
                        <Text type="secondary" data-oid="dn_ahew">
                          {task.assignee}
                        </Text>
                      </Space>
                    </Card>
                  </List.Item>
                )}
                data-oid="f82vd49"
              />
            </Card>
          ))}
        </div>
        <Card
          className={styles.resourcePanel}
          bordered={false}
          data-oid="13owq7p"
        >
          <Title level={4} data-oid="g47wd4c">
            资源池
          </Title>
          <List
            dataSource={resources}
            renderItem={(resource) => (
              <List.Item data-oid="m1wtu_v">
                <Text data-oid="le9-210">{resource.name}</Text>
                <Text type="secondary" data-oid="1505-ze">
                  ({resource.taskCount})
                </Text>
              </List.Item>
            )}
            data-oid="d_p69sm"
          />
        </Card>
      </div>
    </Layout>
  );
};

export default TaskBoard;
